<template>
    <view class="container">
        <button @click="showPopup" class="show-popup-btn">显示弹窗</button>
        <view class="overlay" :style="{ display: isPopupVisible ? 'block' : 'none' }" @click="hidePopup"></view>
        <view class="popup" :class="{ 'fade-in': isPopupVisible, 'fade-out': isFadingOut }" :style="{ display: isPopupVisible ? 'block' : 'none' }">
            <view class="popup-decoration-top">
                <view class="flower flower-left"></view>
                <view class="flower flower-right"></view>
            </view>
            <view class="popup-content">
                <view class="popup-icon">
                    <i class="fa-solid fa-gem"></i>
                </view>
                <view class="popup-header">
                    <text class="congrats-text">恭喜您！</text>
                </view>
                <view class="popup-body">
                    <text class="points-text">您获得了 10 积分，可用于兑换美妆好物！</text>
                </view>
                <view class="popup-footer">
                    <button @click="hidePopup" class="close-btn">关闭</button>
                </view>
            </view>
            <view class="popup-decoration-bottom">
                <view class="sparkle sparkle-left"></view>
                <view class="sparkle sparkle-right"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isPopupVisible: false,
            isFadingOut: false
        };
    },
    methods: {
        showPopup() {
            this.isPopupVisible = true;
        },
        hidePopup() {
            this.isFadingOut = true;
            setTimeout(() => {
                this.isPopupVisible = false;
                this.isFadingOut = false;
            }, 500);
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(135deg, #fbe9e7, #ffebee);
}

.show-popup-btn {
    background-color: #ec407a;
    color: white;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.show-popup-btn:hover {
    background-color: #d81b60;
    transform: scale(1.05);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    z-index: 999;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-align: center;
    width: 500rpx;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    overflow: hidden;
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.popup-decoration-top {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flower {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at center, #f06292 0%, #ec407a 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: flowerBloom 2s infinite alternate;
}

.flower-left {
    margin-left: 20px;
}

.flower-right {
    margin-right: 20px;
}

@keyframes flowerBloom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

.popup-icon {
    font-size: 80px;
    color: #ab47bc;
    margin-bottom: 20px;
    animation: iconFloat 2s infinite alternate;
}

@keyframes iconFloat {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10px);
    }
}

.popup-header {
    margin-bottom: 15px;
}

.congrats-text {
    color: #880e4f;
    font-size: 36px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.popup-body {
    margin-bottom: 25px;
}

.points-text {
    color: #c2185b;
    font-size: 20px;
    font-family: 'Playfair Display', serif;
    line-height: 1.5;
}

.popup-footer {
    display: flex;
    justify-content: center;
}

.close-btn {
    background-color: #ba68c8;
    color: white;
    padding: 12px 30px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.close-btn:hover {
    background-color: #9c27b0;
    transform: scale(1.05);
}

.popup-decoration-bottom {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.sparkle {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at center, #fdd835 0%, #ffeb3b 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: sparkleFade 2s infinite alternate;
}

.sparkle-left {
    margin-left: 20px;
}

.sparkle-right {
    margin-right: 20px;
}

@keyframes sparkleFade {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}
</style>    